<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  
  <title>关于手机和电脑之间文字快速互通 | 四叶草</title>
  
  <meta name="keywords" content="archlinux,linux">
  
  
  <meta name="description" content="一个技术宅的技术分享">
  

  
  <link rel="alternate" href="/atom.xml" title="四叶草">
  

  <meta name="HandheldFriendly" content="True" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <!-- meta -->
  

  <!-- link -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css">
  

  

  
    
<link rel="stylesheet" href="/style.css">

  

  <script>
    function setLoadingBarProgress(num) {
      document.getElementById('loading-bar').style.width=num+"%";
    }
  </script>

  
  
<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/atom.xml" title="四叶草" type="application/atom+xml">
</head>

<body>
  
  
  <header class="l_header material">
  <div id="loading-bar-wrapper">
    <div id="loading-bar" class="material"></div>
  </div>

	<div class='wrapper'>
		<div class="nav-main container container--flex">
      <a class="logo flat-box" href='/' >
        
          四叶草
        
      </a>
			<div class='menu navgation'>
				<ul class='h-list'>
          
  					
  						<li>
								<a class="nav flat-box" href="/"
                  
                  
                  id="home">
									<i class='fas fa-home fa-fw'></i>&nbsp;主页
								</a>
							</li>
      			
  						<li>
								<a class="nav flat-box" href="/categories/"
                  
                    rel="nofollow"
                  
                  
                  id="categories">
									<i class='fas fa-folder-open fa-fw'></i>&nbsp;分类
								</a>
							</li>
      			
  						<li>
								<a class="nav flat-box" href="/tags/"
                  
                    rel="nofollow"
                  
                  
                  id="tags">
									<i class='fas fa-hashtag fa-fw'></i>&nbsp;标签
								</a>
							</li>
      			
  						<li>
								<a class="nav flat-box" href="/archives/"
                  
                    rel="nofollow"
                  
                  
                  id="archives">
									<i class='fas fa-archive fa-fw'></i>&nbsp;归档
								</a>
							</li>
      			
      		
				</ul>
			</div>

			
				<div class="m_search">
					<form name="searchform" class="form u-search-form">
						<input type="text" class="input u-search-input" placeholder="搜索" />
						<i class="icon fas fa-search fa-fw"></i>
					</form>
				</div>
			
			<ul class='switcher h-list'>
				
					<li class='s-search'><a class="fas fa-search fa-fw" href='javascript:void(0)'></a></li>
				
				<li class='s-menu'><a class="fas fa-bars fa-fw" href='javascript:void(0)'></a></li>
			</ul>
		</div>

		<div class='nav-sub container container--flex'>
			<a class="logo flat-box"></a>
			<ul class='switcher h-list'>
				<li class='s-comment'><a class="flat-btn fas fa-comments fa-fw" href='javascript:void(0)'></a></li>
        
          <li class='s-toc'><a class="flat-btn fas fa-list fa-fw" href='javascript:void(0)'></a></li>
        
			</ul>
		</div>
	</div>
</header>
	<aside class="menu-phone">
    <header>
		<nav class="menu navgation">
      <ul>
        
          
            <li>
							<a class="nav flat-box" href="/"
                
                
                id="home">
								<i class='fas fa-clock fa-fw'></i>&nbsp;近期
							</a>
            </li>
          
            <li>
							<a class="nav flat-box" href="/categories/"
                
                  rel="nofollow"
                
                
                id="categories">
								<i class='fas fa-folder-open fa-fw'></i>&nbsp;分类
							</a>
            </li>
          
            <li>
							<a class="nav flat-box" href="/tags/"
                
                  rel="nofollow"
                
                
                id="tags">
								<i class='fas fa-hashtag fa-fw'></i>&nbsp;标签
							</a>
            </li>
          
            <li>
							<a class="nav flat-box" href="/archives/"
                
                  rel="nofollow"
                
                
                id="archives">
								<i class='fas fa-archive fa-fw'></i>&nbsp;归档
							</a>
            </li>
          
            <li>
							<a class="nav flat-box" href="/about/"
                
                  rel="nofollow"
                
                
                id="about">
								<i class='fas fa-info-circle fa-fw'></i>&nbsp;关于
							</a>
            </li>
          
       
      </ul>
		</nav>
    </header>
	</aside>
<script>setLoadingBarProgress(40);</script>



  <div class="l_body nocover">
    <div class='body-wrapper'>
      <div class='l_main'>
  

  <article id="post" class="post white-box article-type-post" itemscope itemprop="blogPost">
    


  <section class='meta'>
    
    
    <div class="meta" id="header-meta">
      
        
  
    <h1 class="title">
      <a href="/learn/qnote/">
        关于手机和电脑之间文字快速互通
      </a>
    </h1>
  


      
      <div class='new-meta-box'>
        
          
        
          
            
  <div class='new-meta-item author'>
    
      <a href="/about" rel="nofollow">
        
          <i class="fas fa-user" aria-hidden="true"></i>
        
        <p>四叶草🍀</p>
      </a>
    
  </div>


          
        
          
            <div class="new-meta-item date">
  <a class='notlink'>
    <i class="fas fa-calendar-alt" aria-hidden="true"></i>
    <p>2019-12-06</p>
  </a>
</div>

          
        
          
            
  
  <div class='new-meta-item category'>
    <a href='/categories/%E6%8E%A2%E7%A9%B6%E5%AD%A6%E4%B9%A0/' rel="nofollow">
      <i class="fas fa-folder-open" aria-hidden="true"></i>
      <p>探究学习</p>
    </a>
  </div>


          
        
          
            

  <div class="new-meta-item markdown">
    
    
      <a href="https://github.com/fkxxyz/fkxxyz-blog-src/blob/master/source/_posts/learn/qnote.md" target="_blank" rel="nofollow noopener">
    
      <i class="fab fa-markdown"></i>
      <p>md源文档</p>
    </a>
  </div>



          
        
          
            

  <div class="new-meta-item download">
    
    
      <a href="https://github.com/fkxxyz/fkxxyz-blog-src/raw/master/source/_posts/learn/qnote.md" target="_blank" rel="nofollow noopener">
    
      <i class="fas fa-download"></i>
      <p>下载本文</p>
    </a>
  </div>



          
        
          
            
  
    <div class="new-meta-item browse busuanzi">
      <a class='notlink'>
        <i class="fas fa-eye" aria-hidden="true"></i>
        <p>
          <span id="busuanzi_value_page_pv">
            <i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i>
          </span>
        </p>
      </a>
    </div>
  


          
        
          
            

          
        
      </div>
      
        <hr>
      
    </div>
  </section>


    <section class="article typo">
      <div class="article-entry" itemprop="articleBody">
        <p>有时候在手机上搜到什么好代码好网址，想立刻转到电脑上用，发现有时候不怎么方便。有这几个方案：</p>
<ol>
<li>用通信软件，手机电脑同时启动QQ或微信，发送到电脑上。</li>
<li>用百度网盘或者github等服务互通。</li>
<li>用局域网软件，如feem、ftp等等。</li>
<li>用数据线，adb工具，访问手机储存。</li>
</ol>
<p>发现都有一定的不方便之处，要启动这么庞大的QQ，要同一局域网，要数据线。</p>
<p>既然咱们是做技术的，技术改变生活，让生活变得更方便。现在，是时候解决这个问题了。</p>
<a id="more"></a>

<h2 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h2><p>由于我有个租的阿里云服务器，如果有这样一个轻量集软件，甚至不需要软件，只用浏览器，用一个网页就能实现电脑和手机互通，岂不是会非常迅速，对工作效率也会提升很多。</p>
<p>先找找有没有这方面的软件，闭源的商业软件要么有广告要么要登录很慢很复杂，不喜欢这样的。开源的软件也暂时找不到很方便的，希望有推荐。</p>
<p>应对自己这样的需求，我打算自己实现一个。</p>
<p>怎样的方案实现呢？想出几个备选方案：</p>
<ol>
<li><p>用 python 网络编程，tcp协议，服务端放服务器，客户端在任意终端。</p>
<p>麻烦之处在于在tcp协议之上得自己设计自己的协议，而且手机用python并不方便，显然实现起来比较麻烦成本比较高，不做这种重复造轮子的事情。</p>
</li>
<li><p>看来浏览器是个好东西，哪个终端设备都有浏览器，那么，用前端技术实现是不是最好的选择呢。</p>
<p>看起来是，用php编个后端在服务器上运行，打开浏览器就能记住笔记，然后后端把笔记记录到服务器中的某个文件里，任何浏览器访问的时候，后端读取这个文件前端处理显示出来。</p>
</li>
</ol>
<p>看来php这个方案是最方便的，就选它了。虽然前端开发经验比较少，仅限于知道http的get和post的请求，前端的html5的语法，css的基础知识，还有js基本怎么作用，后端大概怎么处理请求返回html页面的逻辑。</p>
<h2 id="设计"><a href="#设计" class="headerlink" title="设计"></a>设计</h2><p>既然是网页实现，那么在脑海里浮现了这样一个画面：</p>
<ol>
<li>一个多行文本框，有滚动条，可以输入任意长的文本。</li>
<li>两个按钮，一个按钮是提交，一个按钮是清空文本。</li>
<li>单击提交按钮后，会把文本框的内容通过post请求发送到服务器。</li>
<li>每次打开页面事，文本框内会自动显示服务器记录的文本。</li>
</ol>
<h2 id="预备的php知识"><a href="#预备的php知识" class="headerlink" title="预备的php知识"></a>预备的php知识</h2><p>由于没有php开发经验，只是知道php是个什么东西，只会php的hello world。没关系，先想想我需要什么，百度搜就是了。</p>
<ol>
<li><p>需要用php读写文件</p>
<p>百度一搜，搜到了 file_get_contents、fopen、fwrite、fclose 几个函数的语法，这不和众多编程语言一模一样的语法和参数嘛，这问题解决了。</p>
</li>
<li><p>变量的用法</p>
<p>编程免不了使用变量，哪怕再简单的程序。查了下，发现 php 的数据类型有字符串、整数、浮点数、逻辑、数组、对象，还是挺少的。这里主要用字符串。语法也很简单，不需要声明变量，每个变量前面都要加 $ ，无论是初始化赋值还是使用。</p>
</li>
<li><p>处理post请求</p>
<p>这个是重点，思路是前端的文本框用post发送到后端，后端得能收到内容并且存到文件。查了下，发现这个特殊变量 $_POST ，有点类似于python的字典用法，只需要指定前端传过来的键值，那么我就用 $_POST[“content”]。</p>
</li>
<li><p>编码解码</p>
<p>信息传递的过程中，由于我域名没有备案，用不了https，是http方式明文传输，中途被过滤关键字什么可能会降低传输速度，我想加密或者加一层编码，哪怕只用base64状况会好很多，那就选base64吧。</p>
<p>查到了这些函数：</p>
<ol>
<li>base64_encode 和 base64_decode</li>
<li>urlencode 和 urldecode</li>
<li>rawurlencode 和 rawurldecode</li>
</ol>
</li>
<li><p>语法</p>
<p>关于语法，在实验的过程中踩了很多坑，服务器总是返回 500 的错误码，检查发现都是漏分号。那么和 C++ 以及 java 的编程习惯一样，每个语句最后加分号。</p>
</li>
</ol>
<p>差不多就需要这么点东西了，前端如何处理编码解码呢，html实现不了，恐怕需要js，那么还得搜集一点js的函数和知识。</p>
<h2 id="预备的前端知识"><a href="#预备的前端知识" class="headerlink" title="预备的前端知识"></a>预备的前端知识</h2><p>在前端的js和html，有需要实现编码解码，需要解码之后改变文本框的内容，post之前也得编码。</p>
<ol>
<li><p>多行文本框，随着窗口变化改变尺寸</p>
<p>用 textarea 标签，设置它及其 form 的样式 width</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">form</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">90%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">textarea</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">90%</span>;</span><br><span class="line">    <span class="attribute">overflow</span>:auto;</span><br><span class="line">    <span class="attribute">word-break</span>:break-all;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>post 请求</p>
<p>设置 form 的 method 属性为 post</p>
</li>
<li><p>post 之后页面自动跳转回去</p>
<p>搜索查到这样的办法，在 head 标签里面加个 meta，表示一秒钟之后刷新到 /</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"refresh"</span> <span class="attr">content</span>=<span class="string">"1;url=/"</span> /&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>编码解码</p>
<p>查到了这些函数：</p>
<ol>
<li>encodeURI 和 decodeURI</li>
<li>encodeURIComponent 和 decodeURIComponent</li>
<li>window.btoa 和 window.atob</li>
</ol>
<p>在查询百度和反复用浏览器的控制台实验，终于弄清了他们的区别。</p>
<ol>
<li><p>改变文本框内容</p>
<ol>
<li><p>改变 textarea 的内容</p>
<p>document.getElementById(textarea的ID).value = 内容</p>
</li>
<li><p>改变 html 结构的内容</p>
<p>document.getElementById(标签的ID).innerText = 内容</p>
</li>
</ol>
</li>
</ol>
</li>
<li><p>适应手机端</p>
<p>搜索轻易查到在 head 标签里面加个 meta</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"</span> /&gt;</span></span><br></pre></td></tr></table></figure>



</li>
</ol>
<p>##　逻辑设计</p>
<h3 id="前端"><a href="#前端" class="headerlink" title="前端"></a>前端</h3><ol>
<li>在打开页面之后，立刻执行js代码，把后端传输过来的编码过的字符串解码，然后把html内容设置成解码后的内容</li>
<li>在 post 请求之前，利用 input 标签的 onclick 属性提前执行一段js代码，把内容编码然后再 post</li>
</ol>
<h3 id="后端"><a href="#后端" class="headerlink" title="后端"></a>后端</h3><p>需要两个页面，一个是读取和编辑页面的 php，一个是处理 post 请求的页面 php，分别取名为 index.php 和 submit.php</p>
<ol>
<li><p><strong>index.php</strong></p>
<p>先读取文件，再编码文件，再显示到 testarea 的值里。</p>
</li>
<li><p><strong>submit.php</strong></p>
<p>先解码得到的内容，再把内容写入文件。</p>
</li>
</ol>
<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><p>在经过一段时间的实验和调试后，index.php 和 submit.php 的代码基本完工，以下是简易的初始版本，后续可以随时改进。项目地址在 <a href="https://github.com/fkxxyz/qnote" target="_blank" rel="noopener">https://github.com/fkxxyz/qnote</a></p>
<h3 id="index-php"><a href="#index-php" class="headerlink" title="index.php"></a>index.php</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE HTML&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>fkxxyz<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Content-Type"</span> <span class="attr">content</span>=<span class="string">"text/html; charset=utf-8"</span> /&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"</span> /&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">		form &#123;</span><br><span class="line"><span class="css">			<span class="selector-tag">width</span><span class="selector-pseudo">:90</span>%;</span></span><br><span class="line">		&#125;</span><br><span class="line">		textarea &#123;</span><br><span class="line"><span class="css">			<span class="selector-tag">width</span><span class="selector-pseudo">:90</span>%;</span></span><br><span class="line"><span class="css">			<span class="selector-tag">overflow</span><span class="selector-pseudo">:auto</span>;</span></span><br><span class="line"><span class="css">			<span class="selector-tag">word-break</span><span class="selector-pseudo">:break-all</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line">		input &#123;</span><br><span class="line"><span class="css">			<span class="selector-tag">width</span><span class="selector-pseudo">:120px</span>;</span></span><br><span class="line"><span class="css">			<span class="selector-tag">height</span><span class="selector-pseudo">:60px</span>;</span></span><br><span class="line"><span class="css">			<span class="selector-tag">font-size</span><span class="selector-pseudo">:20px</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line">	<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">form</span> <span class="attr">class</span>=<span class="string">"form"</span> <span class="attr">name</span>=<span class="string">"editform"</span> <span class="attr">method</span>=<span class="string">"post"</span> <span class="attr">action</span>=<span class="string">"submit.php"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">onclick</span>=<span class="string">"encode_texta()"</span> <span class="attr">value</span>=<span class="string">"提交"</span> /&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">onclick</span>=<span class="string">"clear_texta()"</span> <span class="attr">value</span>=<span class="string">"清空"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">textarea</span> <span class="attr">id</span>=<span class="string">"texta"</span> <span class="attr">rows</span>=<span class="string">"20"</span> <span class="attr">name</span>=<span class="string">"content"</span>&gt;</span><span class="php"><span class="meta">&lt;?php</span></span></span><br><span class="line"><span class="php">			$file=<span class="string">"/srv/ftp/note.txt"</span>;</span></span><br><span class="line"><span class="php">			<span class="keyword">echo</span> base64_encode(rawurlencode(base64_decode(file_get_contents($file))));</span></span><br><span class="line"><span class="php">		<span class="meta">?&gt;</span></span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">		<span class="function"><span class="keyword">function</span> <span class="title">t_encode</span><span class="params">(s)</span></span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">return</span> <span class="built_in">window</span>.btoa(<span class="built_in">encodeURIComponent</span>(s));</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="actionscript">		<span class="function"><span class="keyword">function</span> <span class="title">t_decode</span><span class="params">(s)</span></span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">return</span> <span class="built_in">decodeURIComponent</span>(<span class="built_in">window</span>.atob(s));</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="actionscript">		<span class="function"><span class="keyword">function</span> <span class="title">clear_texta</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">document</span>.getElementById(<span class="string">"texta"</span>).value = <span class="string">""</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="actionscript">		<span class="function"><span class="keyword">function</span> <span class="title">encode_texta</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="javascript">			texta = <span class="built_in">document</span>.getElementById(<span class="string">"texta"</span>);</span></span><br><span class="line">			texta.value = t_encode(texta.value);</span><br><span class="line">		&#125;</span><br><span class="line"><span class="actionscript">		<span class="function"><span class="keyword">function</span> <span class="title">decode_texta</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="javascript">			texta = <span class="built_in">document</span>.getElementById(<span class="string">"texta"</span>);</span></span><br><span class="line">			texta.value = t_decode(texta.value);</span><br><span class="line">		&#125;</span><br><span class="line">		decode_texta();</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="submit-php"><a href="#submit-php" class="headerlink" title="submit.php"></a>submit.php</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE HTML&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>提交<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"</span> /&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Content-Type"</span> <span class="attr">content</span>=<span class="string">"text/html; charset=utf-8"</span> /&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"refresh"</span> <span class="attr">content</span>=<span class="string">"1;url=/"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="php"><span class="meta">&lt;?php</span></span></span><br><span class="line"><span class="php">		$file=<span class="string">"/srv/ftp/note.txt"</span>;</span></span><br><span class="line"><span class="php">		$f = fopen($file, <span class="string">"w"</span>) <span class="keyword">or</span> <span class="keyword">die</span>(<span class="string">"服务器出错！无法打开文件。"</span>);</span></span><br><span class="line"><span class="php">		fwrite($f, base64_encode(rawurldecode(base64_decode($_POST[<span class="string">"content"</span>]))));</span></span><br><span class="line"><span class="php">		fclose($f);</span></span><br><span class="line"><span class="php">		<span class="keyword">echo</span> <span class="string">"&lt;h1&gt;提交成功&lt;/h1&gt;"</span>;</span></span><br><span class="line"><span class="php">		<span class="keyword">echo</span> <span class="string">"&lt;div id=\"textd\"&gt;"</span>;</span></span><br><span class="line"><span class="php">		<span class="keyword">echo</span> $_POST[<span class="string">"content"</span>];</span></span><br><span class="line"><span class="php">		<span class="keyword">echo</span> <span class="string">"&lt;/div&gt;"</span></span></span><br><span class="line"><span class="php">		<span class="meta">?&gt;</span></span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">		<span class="function"><span class="keyword">function</span> <span class="title">t_decode</span><span class="params">(s)</span></span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">return</span> <span class="built_in">decodeURIComponent</span>(<span class="built_in">window</span>.atob(s));</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="actionscript">		<span class="function"><span class="keyword">function</span> <span class="title">decode_textd</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="javascript">			textd = <span class="built_in">document</span>.getElementById(<span class="string">"textd"</span>);</span></span><br><span class="line">			textd.innerText = t_decode(textd.innerText);</span><br><span class="line">		&#125;</span><br><span class="line">		decode_textd();</span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="效果展示"><a href="#效果展示" class="headerlink" title="效果展示"></a>效果展示</h2><h3 id="电脑端"><a href="#电脑端" class="headerlink" title="电脑端"></a>电脑端</h3><p><img src="/img/qnote-1.png" alt="qnote-1"  /><img src="/img/qnote-2.png" alt="qnote-2"  /></p>
<h3 id="手机端"><a href="#手机端" class="headerlink" title="手机端"></a>手机端</h3><img src="/img/qnote-3.png" style="zoom: 50%;" />


<h2 id="电脑端更快速的处理"><a href="#电脑端更快速的处理" class="headerlink" title="电脑端更快速的处理"></a>电脑端更快速的处理</h2><p>在服务器端，我没有直接把内容直接放到文件里，而是加了层 base64 编码放进去。</p>
<p>因为考虑到，在 linux 端，我服务器开了 ftp，我可以不用打开浏览器也能快速连接到服务器获取内容，由于传输也没有加密，为了不以明文传输所以也 base64 一下。</p>
<p>以下命令快速获取服务器的笔记内容</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">curl -s ftp://地址/note.txt | base64 -d</span><br></pre></td></tr></table></figure>

<p>把它保存为脚本，一执行，就能在控制台里面看到内容，美滋滋。</p>
<p>同样的思路，能不能不打开浏览器也能 post 呢，一查果真容易实现，curl 就能发送 post 请求，连 pyhon 都免了！</p>
<p>以下命令快速记录笔记上传到服务器，返回错误代码</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">curl -d "content=$(cat | base64)" http://地址/submit.php</span><br></pre></td></tr></table></figure>

<p>写成脚本吧，获取状态码，返回是否成功</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash">!/bin/bash</span></span><br><span class="line"></span><br><span class="line">code="$(curl -d "content=$(cat | base64)" -o /dev/null -w %&#123;http_code&#125; -s http://地址/submit.php)"</span><br><span class="line">echo</span><br><span class="line">if [ "$code" == "200" ]; then</span><br><span class="line">    echo "提交成功"</span><br><span class="line">else</span><br><span class="line">    echo "出错，http 状态码： $code"</span><br><span class="line">fi</span><br></pre></td></tr></table></figure>

<p>脚本执行后，可以输入任意文字，按 Ctrl + D 结束输入开始提交。</p>
<p>至此，大功告成。</p>
<p>再也不用启动 QQ微信什么的了，也不需要局域网软件了。只要能联网，任意地方都能快速笔记互通了。</p>
<h2 id="手机端-1"><a href="#手机端-1" class="headerlink" title="手机端"></a>手机端</h2><p>手机端就更简单了，用的按卓手机，加上 chromium 浏览器，把我的服务器地址添加到桌面快捷方式，桌面上随时点开粘贴，然后提交。</p>
<h2 id="后续可能的改进"><a href="#后续可能的改进" class="headerlink" title="后续可能的改进"></a>后续可能的改进</h2><ol>
<li><p>由于传输过程只是 base64 ，未加密，中途被拦截篡改或者泄露。</p>
<p>这个问题目前不需要解决，因为我个人不是什么重要机构信息没那么大的价值，也没有人恶意盯着陷害我，等以后有了安全需求再说。</p>
</li>
<li><p>谁都可以打开浏览器通过 http 协议访问我的服务器，只要知道我的服务器地址。</p>
<p>这个问题目前也不需要解决，因为我服务器私人用，也不会有谁故意捣乱。等到有这个需求再说，可以加个验证什么的。</p>
</li>
<li><p>有时候会有图片传输的需求，甚至文件传输的需求，一般都 ftp 或者在线私人网盘了，暂时也不需要。</p>
</li>
<li><p>美观。</p>
</li>
</ol>

      </div>
      
      
        <br>
        


  <section class='meta' id="footer-meta">
    <div class='new-meta-box'>
      
        
          <div class="new-meta-item date" itemprop="dateUpdated" datetime="2019-12-18T18:10:14+08:00">
  <a class='notlink'>
    <i class="fas fa-clock" aria-hidden="true"></i>
    <p>更新于 2019年12月18日</p>
  </a>
</div>

        
      
        
          
  
  <div class="new-meta-item meta-tags"><a class="tag" href="/tags/%E5%89%8D%E7%AB%AF/" rel="nofollow"><i class="fas fa-tag" aria-hidden="true"></i><p>前端</p></a></div> <div class="new-meta-item meta-tags"><a class="tag" href="/tags/php/" rel="nofollow"><i class="fas fa-tag" aria-hidden="true"></i><p>php</p></a></div>


        
      
        
          
  <div class="new-meta-item share -mob-share-list">
  <div class="-mob-share-list share-body">
    
      
        <a class="-mob-share-qq" title="QQ好友" rel="external nofollow noopener noreferrer"
          
          href="http://connect.qq.com/widget/shareqq/index.html?url=https://www.fkxxyz.com/learn/qnote/&title=关于手机和电脑之间文字快速互通 | 四叶草&summary=有时候在手机上搜到什么好代码好网址，想立刻转到电脑上用，发现有时候不怎么方便。有这几个方案：

用通信软件，手机电脑同时启动QQ或微信，发送到电脑上。
用百度网盘或者github等服务互通。
用局域网软件，如feem、ftp等等。
用数据线，adb工具，访问手机储存。

发现都有一定的不方便之处，要启动这么庞大的QQ，要同一局域网，要数据线。
既然咱们是做技术的，技术改变生活，让生活变得更方便。现在，是时候解决这个问题了。"
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/qq.png">
          
        </a>
      
    
      
        <a class="-mob-share-qzone" title="QQ空间" rel="external nofollow noopener noreferrer"
          
          href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://www.fkxxyz.com/learn/qnote/&title=关于手机和电脑之间文字快速互通 | 四叶草&summary=有时候在手机上搜到什么好代码好网址，想立刻转到电脑上用，发现有时候不怎么方便。有这几个方案：

用通信软件，手机电脑同时启动QQ或微信，发送到电脑上。
用百度网盘或者github等服务互通。
用局域网软件，如feem、ftp等等。
用数据线，adb工具，访问手机储存。

发现都有一定的不方便之处，要启动这么庞大的QQ，要同一局域网，要数据线。
既然咱们是做技术的，技术改变生活，让生活变得更方便。现在，是时候解决这个问题了。"
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/qzone.png">
          
        </a>
      
    
      
        <a class="-mob-share-weibo" title="微博" rel="external nofollow noopener noreferrer"
          
          href="http://service.weibo.com/share/share.php?url=https://www.fkxxyz.com/learn/qnote/&title=关于手机和电脑之间文字快速互通 | 四叶草&summary=有时候在手机上搜到什么好代码好网址，想立刻转到电脑上用，发现有时候不怎么方便。有这几个方案：

用通信软件，手机电脑同时启动QQ或微信，发送到电脑上。
用百度网盘或者github等服务互通。
用局域网软件，如feem、ftp等等。
用数据线，adb工具，访问手机储存。

发现都有一定的不方便之处，要启动这么庞大的QQ，要同一局域网，要数据线。
既然咱们是做技术的，技术改变生活，让生活变得更方便。现在，是时候解决这个问题了。"
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/weibo.png">
          
        </a>
      
    
  </div>
</div>



        
      
    </div>
  </section>


      
      
          <div class="prev-next">
              
                  <section class="prev">
                      <span class="art-item-left">
                          <h6><i class="fas fa-chevron-left" aria-hidden="true"></i>&nbsp;上一页</h6>
                          <h4>
                              <a href="/s/linux-virus/" rel="prev" title="我的阿里云服务器中毒了，把这有趣的事情记录下来。">
                                
                                    我的阿里云服务器中毒了，把这有趣的事情记录下来。
                                
                              </a>
                          </h4>
                          
                              
                              <h6 class="tags">
                                  <a class="tag" href="/tags/%E4%BF%A1%E6%81%AF%E5%AE%89%E5%85%A8/"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> 信息安全</a>
                              </h6>
                          
                      </span>
                  </section>
              
              
                  <section class="next">
                      <span class="art-item-right" aria-hidden="true">
                          <h6>下一页&nbsp;<i class="fas fa-chevron-right" aria-hidden="true"></i></h6>
                          <h4>
                              <a href="/c/sed/" rel="prev" title="sed 命令从入门到精通">
                                  
                                      sed 命令从入门到精通
                                  
                              </a>
                          </h4>
                          
                              
                              <h6 class="tags">
                                  <a class="tag" href="/tags/linux/"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> linux</a> <a class="tag" href="/tags/shell/"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> shell</a> <a class="tag" href="/tags/sed/"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> sed</a>
                              </h6>
                          
                      </span>
                  </section>
              
          </div>
      
    </section>
  </article>



  <!-- 显示推荐文章和评论 -->



  






<!-- 根据页面mathjax变量决定是否加载MathJax数学公式js -->



  <script>
    window.subData = {
      title: '关于手机和电脑之间文字快速互通',
      tools: true
    }
  </script>


</div>
<aside class='l_side'>
  
    
    
      
      
        
          
          
        
          
          
        
          
          
        
          
          
            
              <section class='widget grid'>
  
<header class='material'>
  <div><i class="fas fa-map-signs fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;站内导航</div>
  
</header>

  <div class='content material'>
    <ul class="grid navgation">
      
        <li><a class="flat-box" title="/" href="/"
          
          
          id="home">
          
            <i class="fas fa-clock fa-fw" aria-hidden="true"></i>
          
          近期文章
        </a></li>
      
        <li><a class="flat-box" title="/archives/" href="/archives/"
          
            rel="nofollow"
          
          
          id="archives">
          
            <i class="fas fa-archive fa-fw" aria-hidden="true"></i>
          
          文章归档
        </a></li>
      
        <li><a class="flat-box" title="/about/" href="/about/"
          
            rel="nofollow"
          
          
          id="about">
          
            <i class="fas fa-info-circle fa-fw" aria-hidden="true"></i>
          
          关于小站
        </a></li>
      
    </ul>
  </div>
</section>

            
          
        
          
          
        
          
          
        
          
          
        
          
          
        
      
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
            
              
  <section class='widget category'>
    
<header class='material'>
  <div><i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;文章分类</div>
  
    <a class="rightBtn"
    
      rel="nofollow"
    
    
    href="/categories/"
    title="categories/">
    <i class="fas fa-expand-arrows-alt fa-fw"></i></a>
  
</header>

    <div class='content material'>
      <ul class="entry">
        
          <li><a class="flat-box" title="/categories/%E5%8E%9F%E5%88%9B%E5%BC%80%E5%8F%91/" href="/categories/%E5%8E%9F%E5%88%9B%E5%BC%80%E5%8F%91/"><div class='name'>原创开发</div><div class='badge'>(5)</div></a></li>
        
          <li><a class="flat-box" title="/categories/%E6%8E%A2%E7%A9%B6%E5%AD%A6%E4%B9%A0/" href="/categories/%E6%8E%A2%E7%A9%B6%E5%AD%A6%E4%B9%A0/"><div class='name'>探究学习</div><div class='badge'>(6)</div></a></li>
        
          <li><a class="flat-box" title="/categories/%E6%95%99%E7%A8%8B/" href="/categories/%E6%95%99%E7%A8%8B/"><div class='name'>教程</div><div class='badge'>(7)</div></a></li>
        
          <li><a class="flat-box" title="/categories/%E8%AE%B0%E5%BD%95/" href="/categories/%E8%AE%B0%E5%BD%95/"><div class='name'>记录</div><div class='badge'>(1)</div></a></li>
        
      </ul>
    </div>
  </section>


            
          
        
          
          
        
          
          
        
          
          
        
      
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
            
              
  <section class='widget tagcloud'>
    
<header class='material'>
  <div><i class="fas fa-tags fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;热门标签</div>
  
    <a class="rightBtn"
    
      rel="nofollow"
    
    
    href="/tags/"
    title="tags/">
    <i class="fas fa-expand-arrows-alt fa-fw"></i></a>
  
</header>

    <div class='content material'>
      <a href="/tags/archlinux/" style="font-size: 24px; color: #555">archlinux</a> <a href="/tags/fcitx/" style="font-size: 16.5px; color: #888">fcitx</a> <a href="/tags/hexo/" style="font-size: 16.5px; color: #888">hexo</a> <a href="/tags/linux/" style="font-size: 19px; color: #777">linux</a> <a href="/tags/php/" style="font-size: 14px; color: #999">php</a> <a href="/tags/python/" style="font-size: 21.5px; color: #666">python</a> <a href="/tags/rime/" style="font-size: 14px; color: #999">rime</a> <a href="/tags/sed/" style="font-size: 14px; color: #999">sed</a> <a href="/tags/shell/" style="font-size: 14px; color: #999">shell</a> <a href="/tags/wine/" style="font-size: 16.5px; color: #888">wine</a> <a href="/tags/%E4%BF%A1%E6%81%AF%E5%AE%89%E5%85%A8/" style="font-size: 16.5px; color: #888">信息安全</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 14px; color: #999">前端</a> <a href="/tags/%E5%8D%B3%E5%85%B4%E4%BC%B4%E5%A5%8F/" style="font-size: 14px; color: #999">即兴伴奏</a> <a href="/tags/%E5%8F%8C%E6%98%BE%E5%8D%A1%E5%88%87%E6%8D%A2/" style="font-size: 14px; color: #999">双显卡切换</a> <a href="/tags/%E5%92%8C%E5%BC%A6/" style="font-size: 14px; color: #999">和弦</a> <a href="/tags/%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/" style="font-size: 16.5px; color: #888">思维导图</a> <a href="/tags/%E6%A1%8C%E9%9D%A2%E7%8E%AF%E5%A2%83/" style="font-size: 14px; color: #999">桌面环境</a> <a href="/tags/%E7%9A%AE%E8%82%A4/" style="font-size: 14px; color: #999">皮肤</a> <a href="/tags/%E8%BE%93%E5%85%A5%E6%B3%95/" style="font-size: 16.5px; color: #888">输入法</a> <a href="/tags/%E9%9F%B3%E4%B9%90/" style="font-size: 14px; color: #999">音乐</a>
    </div>
  </section>


            
          
        
          
          
        
          
          
        
      
        
          
          
        
          
          
        
          
          
            
              
  <section class='widget toc-wrapper'>
    
<header class='material'>
  <div><i class="fas fa-list fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;本文目录</div>
  
    <!-- <div class='wrapper'><a class="s-toc rightBtn" rel="external nofollow noopener noreferrer" href="javascript:void(0)"><i class="fas fa-thumbtack fa-fw"></i></a></div> -->
  
</header>

    <div class='content material'>
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#思路"><span class="toc-text">思路</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#设计"><span class="toc-text">设计</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#预备的php知识"><span class="toc-text">预备的php知识</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#预备的前端知识"><span class="toc-text">预备的前端知识</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#前端"><span class="toc-text">前端</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#后端"><span class="toc-text">后端</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#代码实现"><span class="toc-text">代码实现</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#index-php"><span class="toc-text">index.php</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#submit-php"><span class="toc-text">submit.php</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#效果展示"><span class="toc-text">效果展示</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#电脑端"><span class="toc-text">电脑端</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#手机端"><span class="toc-text">手机端</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#电脑端更快速的处理"><span class="toc-text">电脑端更快速的处理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#手机端-1"><span class="toc-text">手机端</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#后续可能的改进"><span class="toc-text">后续可能的改进</span></a></li></ol>
    </div>
  </section>


            
          
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
        
      
    

  
</aside>

<footer id="footer" class="clearfix">
  
  
    <div class="social-wrapper">
      
        
          <a href="/atom.xml"
            class="social fas fa-rss flat-btn"
            target="_blank"
            rel="external nofollow noopener noreferrer">
          </a>
        
      
        
          <a href="mailto:fkxxyz@163.com"
            class="social fas fa-envelope flat-btn"
            target="_blank"
            rel="external nofollow noopener noreferrer">
          </a>
        
      
        
          <a href="https://github.com/fkxxyz"
            class="social fab fa-github flat-btn"
            target="_blank"
            rel="external nofollow noopener noreferrer">
          </a>
        
      
        
          <a href="https://ti.qq.com/open_qq/index2.html?url=mqqapi%3a%2f%2fuserprofile%2ffriend_profile_card%3fsrc_type%3dweb%26version%3d1.0%26source%3d2%26uin%3d396519827"
            class="social fab fa-qq flat-btn"
            target="_blank"
            rel="external nofollow noopener noreferrer">
          </a>
        
      
    </div>
  
  <br>
  <div><p>博客内容遵循 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议</a></p>
</div>
  <div>
    本站使用
    <a href="https://xaoxuu.com/wiki/material-x/" target="_blank" class="codename">Material X</a>
    作为主题
    
      ，
      总访问量为
      <span id="busuanzi_value_site_pv"><i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span>
      次
    
    。
  </div>
</footer>
<script>setLoadingBarProgress(80);</script>


      <script>setLoadingBarProgress(60);</script>
    </div>
    <a class="s-top fas fa-arrow-up fa-fw" href='javascript:void(0)'></a>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

  <script>
    var GOOGLE_CUSTOM_SEARCH_API_KEY = "";
    var GOOGLE_CUSTOM_SEARCH_ENGINE_ID = "";
    var ALGOLIA_API_KEY = "";
    var ALGOLIA_APP_ID = "";
    var ALGOLIA_INDEX_NAME = "";
    var AZURE_SERVICE_NAME = "";
    var AZURE_INDEX_NAME = "";
    var AZURE_QUERY_KEY = "";
    var BAIDU_API_ID = "";
    var SEARCH_SERVICE = "hexo" || "hexo";
    var ROOT = "/"||"/";
    if(!ROOT.endsWith('/'))ROOT += '/';
  </script>

<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>




  <script async src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js"></script>




  
  
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
    <script type="text/javascript">
      $(function(){
        if ('') {
          $('').backstretch(
          ["/img/background.jpg"],
          {
            duration: "6000",
            fade: "2500"
          });
        } else {
          $.backstretch(
          ["/img/background.jpg"],
          {
            duration: "6000",
            fade: "2500"
          });
        }
      });
    </script>
  











  
<script src="/js/app.js"></script>



  
<script src="/js/search.js"></script>





<!-- 复制 -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
  let COPY_SUCCESS = "复制成功";
  let COPY_FAILURE = "复制失败";
  /*页面载入完成后，创建复制按钮*/
  !function (e, t, a) {
    /* code */
    var initCopyCode = function(){
      var copyHtml = '';
      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
      copyHtml += '  <i class="fa fa-copy"></i><span>复制</span>';
      copyHtml += '</button>';
      $(".highlight .code pre").before(copyHtml);
      var clipboard = new ClipboardJS('.btn-copy', {
        target: function(trigger) {
          return trigger.nextElementSibling;
        }
      });

      clipboard.on('success', function(e) {
        //您可以加入成功提示
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        success_prompt(COPY_SUCCESS);
        e.clearSelection();
      });
      clipboard.on('error', function(e) {
        //您可以加入失败提示
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        fail_prompt(COPY_FAILURE);
      });
    }
    initCopyCode();

  }(window, document);

  /**
   * 弹出式提示框，默认1.5秒自动消失
   * @param message 提示信息
   * @param style 提示样式，有alert-success、alert-danger、alert-warning、alert-info
   * @param time 消失时间
   */
  var prompt = function (message, style, time)
  {
      style = (style === undefined) ? 'alert-success' : style;
      time = (time === undefined) ? 1500 : time*1000;
      $('<div>')
          .appendTo('body')
          .addClass('alert ' + style)
          .html(message)
          .show()
          .delay(time)
          .fadeOut();
  };

  // 成功提示
  var success_prompt = function(message, time)
  {
      prompt(message, 'alert-success', time);
  };

  // 失败提示
  var fail_prompt = function(message, time)
  {
      prompt(message, 'alert-danger', time);
  };

  // 提醒
  var warning_prompt = function(message, time)
  {
      prompt(message, 'alert-warning', time);
  };

  // 信息提示
  var info_prompt = function(message, time)
  {
      prompt(message, 'alert-info', time);
  };

</script>


<!-- fancybox -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
  let LAZY_LOAD_IMAGE = "";
  $(".article-entry").find("fancybox").find("img").each(function () {
      var element = document.createElement("a");
      $(element).attr("data-fancybox", "gallery");
      $(element).attr("href", $(this).attr("src"));
      /* 图片采用懒加载处理时,
       * 一般图片标签内会有个属性名来存放图片的真实地址，比如 data-original,
       * 那么此处将原本的属性名src替换为对应属性名data-original,
       * 修改如下
       */
       if (LAZY_LOAD_IMAGE) {
         $(element).attr("href", $(this).attr("data-original"));
       }
      $(this).wrap(element);
  });
</script>





  <script>setLoadingBarProgress(100);</script>
</body>
</html>
